<template>
	<view class="order-page">
		<image
			class="bg-linear-gradient"
			:src="OSSImgUrl(`bg-linear-gradient.png`)"
			mode="aspectFill"
		/>

		<view class="title-wrapper">
			<view class="title-item" @click="handleChangeTag('ChongZhi')">
				<image
					class="bg"
					mode="widthFix"
					:src="
						OSSImgUrl(
							`xf-title-${curTag === 'ChongZhi' ? 'active' : 'default'}.png`
						)
					"
				/>
				<image
					class="title"
					mode="widthFix"
					:src="
						OSSImgUrl(
							`czjl-title-${curTag === 'ChongZhi' ? 'active' : 'default'}.png`
						)
					"
				/>
			</view>
			<view class="title-item" @click="handleChangeTag('XiaoFei')">
				<image
					class="bg"
					mode="widthFix"
					:src="
						OSSImgUrl(
							`xf-title-${curTag === 'XiaoFei' ? 'active' : 'default'}.png`
						)
					"
				/>
				<image
					class="title"
					mode="widthFix"
					:src="
						OSSImgUrl(
							`xfjl-title-${curTag === 'XiaoFei' ? 'active' : 'default'}.png`
						)
					"
				/>
			</view>
		</view>

		<scroll-view scroll-y="true" class="list-wrapper">
			<template v-if="orderList.length !== 0">
				<view class="chongzhi-list" v-if="curTag === 'ChongZhi'">
					<view
						class="chongzhi-item"
						v-for="(item, index) of orderList"
						:key="index"
					>
						<view class="flex-left">
							<view class="title">{{ formtOrderType(item.order_type) }}</view>
							<view class="info-wrapper">
								<view class="info">
									<view class="prop">订单号 ：</view>
									<view class="info-value">{{ item.order_id }}</view>
								</view>
								<view class="info">
									<view class="prop">日 期 ：</view>
									<view class="info-value">{{
										formatTime(item.add_time)
									}}</view>
								</view>
							</view>
						</view>
						<view class="flex-right">
							<view class="btn">
								<image
									mode="widthFix"
									:src="
										OSSImgUrl(
											`${item.order_status === 1 ? 'yi' : 'wei'}-zhi-fu-bg.png`
										)
									"
								/>
								<view class="txt">{{
									`${item.order_status === 1 ? '已支付' : '未支付'}`
								}}</view>
							</view>

							<view class="gold-txt">金额：{{ item.pay_money }}元</view>
						</view>
					</view>
				</view>

				<view class="xiaofei-list" v-if="curTag === 'XiaoFei'">
					<view
						class="xiaofei-item"
						v-for="(item, index) of orderList"
						:key="index"
					>
						<view class="flex-left">
							<view class="title">{{ item.order_name_a }}</view>
							<view class="date"
								>日 期 ：{{ formatTime(Number(item.add_time + '000')) }}</view
							>
						</view>

						<view class="flex-right">
							<view class="glod">
								<image
									style="height: 76rpx"
									mode="widthFix"
									:src="OSSImgUrl(`xiaofei-gold-bg.png`)"
								/>
								<view class="txt">
									<text class="money">-{{ item.original_pay }}金币</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>

			<u-empty
				v-if="orderList.length === 0"
				mode="order"
				icon="http://cdn.uviewui.com/uview/empty/order.png"
			>
			</u-empty>
		</scroll-view>

		<view class="page-wrapper">
			<view
				class="prev-btn btn-item"
				@click="handlePrevBtn"
				:class="{ disabled: pn <= 1 }"
			>
				<image mode="widthFix" :src="OSSImgUrl(`prev-next-bg.png`)" />
				<view class="txt">上一页</view>
			</view>
			<view class="page-num"> {{ `${pn}/${AllPn}` }}页 </view>
			<view
				class="next-btn btn-item"
				@click="handleNextBtn"
				:class="{ disabled: pn >= AllPn }"
			>
				<image mode="widthFix" :src="OSSImgUrl(`prev-next-bg.png`)" />
				<view class="txt">下一页</view>
			</view>
		</view>

		<view class="im-wrapper">
			<button
				class="im-btn"
				open-type="im"
				:data-im-id="imId"
				binderror="onError"
				bindim="onSuccess"
			>
				<u-icon name="kefu-ermai" color="#666666" size="22"></u-icon>
				<span class="im-btn-text">联系客服</span>
			</button>
		</view>
	</view>
</template>

<script>
import { getApiUserOrderList, getApiUserBuyVideoList } from '@/api/user'
import { OSSImgUrl } from '@/utils'

import dayjs from 'dayjs'
export default {
	data() {
		return {
			orderList: [],
			pn: 1,
			ps: 10,
			total: 0,

			imId: this.$store.state.global.ImId,

			curTag: 'ChongZhi', // ChongZhi | XiaoFei
		}
	},
	computed: {
		AllPn() {
			if (this.total && this.ps) {
				return Math.ceil(this.total / this.ps) || 1
			}
			return 1
		},
	},
	async onLoad() {
		await this.getUserOrderList()
	},
	methods: {
		OSSImgUrl: OSSImgUrl,
		async handleNextBtn() {
			if (this.pn < this.AllPn) {
				const pn = this.pn
				this.pn = pn + 1

				if (this.curTag === 'ChongZhi') {
					await this.getUserOrderList()
				} else {
					await this.getUserBuyVideoList()
				}
			}
		},
		async handlePrevBtn() {
			if (this.pn > 1) {
				const pn = this.pn
				this.pn = pn - 1

				if (this.curTag === 'ChongZhi') {
					await this.getUserOrderList()
				} else {
					await this.getUserBuyVideoList()
				}
			}
		},
		ImBtnCallback(e) {
			console.log('跳转IM客服成功', e.detail)
		},
		ImBtnError(e) {
			console.log('拉起IM客服失败', e.detail)
		},
		async handleChangeTag(tar) {
			this.curTag = tar

			this.pn = 1
			this.ps = 10

			this.total = 0
			this.orderList = []
			if (tar === 'ChongZhi') {
				await this.getUserOrderList()
			} else {
				await this.getUserBuyVideoList()
			}
		},
		async getUserBuyVideoList() {
			const eid = uni.getStorageSync('userInfo').eid
			uni.showLoading({
				title: '加载中',
				mask: true,
			})
			try {
				const {
					data: { count, list },
				} = await getApiUserBuyVideoList(eid, this.pn, this.ps)
				// 当前总个数
				this.total = count || 0
				// 设置新数据
				this.orderList = Array.isArray(list) && list.length > 0 ? list : []
				// 关闭Loading加载提示
				uni.hideLoading()
			} catch (error) {
				uni.hideLoading()
				this.orderList = []
				this.total = 0
			}
		},
		// 获取订单列表
		async getUserOrderList() {
			const eid = uni.getStorageSync('userInfo').eid
			uni.showLoading({
				title: '加载中',
				mask: true,
			})
			try {
				const {
					data: { count, list },
				} = await getApiUserOrderList(eid, this.pn, this.ps)
				// 当前总集数
				this.total = count || 0
				// 设置新数据而非累加
				this.orderList = Array.isArray(list) && list.length > 0 ? list : []
				// 关闭Loading加载提示
				uni.hideLoading()
			} catch (error) {
				console.log('🚀 ~ getUserOrderList ~ error:', error)
				uni.hideLoading()
				this.orderList = []
			}
		},
		// 格式化订单类型
		formtOrderType(type) {
			const orderTypeOption = [
				{
					label: '钻石充值',
					value: 0,
				},
				{
					label: 'VIP充值',
					value: 1,
				},
				{
					label: '全集购买',
					value: 2,
				},
			]
			return orderTypeOption.find((item) => item.value === type)?.label
		},
		// 格式化订单时间
		formatTime(time, type = 'YYYY-MM-DD hh:mm:ss') {
			return dayjs(time).format(type)
		},
		// 切换页码
		async handleCurrentChange({ type, current }) {
			this.pn = current
			// await this.getUserOrderList()

			if (this.curTag === 'ChongZhi') {
				await this.getUserOrderList()
			} else {
				await this.getUserBuyVideoList()
			}

			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0,
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.bg-linear-gradient {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 400rpx;
	z-index: -1;
}

.order-page {
	box-sizing: border-box;
	padding: 40rpx 40rpx;
	height: 100vh;

	.list-wrapper {
		height: calc(100% - 80rpx - 84rpx - 50rpx);
		box-sizing: border-box;
		padding-top: 40rpx;

		.xiaofei-list {
			width: 100%;

			.xiaofei-item {
				position: relative;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				box-sizing: border-box;
				padding: 30rpx 0px;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%, 0px);
					width: 85%;
					height: 4rpx;
					background-color: #dbdbdb;
				}

				.flex-left {
					width: 75%;

					.title {
						font-size: 26rpx;
						font-weight: 600;
						color: #f07207;

						white-space: nowrap;
						/* 禁止换行 */
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
					}

					.date {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #100000;
					}
				}

				.flex-right {
					width: 25%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					padding-top: 10rpx;
					box-sizing: border-box;

					.glod {
						position: relative;
						width: 100%;
						display: flex;

						image {
							width: 100%;
						}

						.txt {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 90%;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #fff;
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.chongzhi-list {
			width: 100%;

			.chongzhi-item {
				position: relative;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0px;
				box-sizing: border-box;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%, 0px);
					width: 85%;
					height: 4rpx;
					background-color: #dbdbdb;
				}

				.flex-left {
					width: 75%;

					.title {
						color: #ffa868;
						font-size: 36rpx;
						font-weight: 600;
						margin-bottom: 20rpx;
					}

					.info-wrapper {
						.info {
							display: flex;
							margin-top: 10rpx;
							color: #756f6f;
							font-size: 28rpx;

							.prop {
								white-space: nowrap;
								text-align: right;
								margin-bottom: 10rpx;
							}
						}
					}
				}

				.flex-right {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;
					padding-top: 20rpx;

					.btn {
						position: relative;
						width: 85%;
						display: flex;

						image {
							width: 100%;
						}

						.txt {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 90%;
							display: flex;
							align-items: center;
							justify-content: center;

							font-size: 28rpx;
							color: #fff;
						}
					}
				}

				.gold-txt {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #6d6b6b;
					white-space: nowrap;
					/* 禁止换行 */
				}
			}
		}
	}

	.page-wrapper {
		box-sizing: border-box;
		padding-top: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.btn-item {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 140rpx;

			&.disabled {
				opacity: 0.5;
				pointer-events: none;
			}

			image {
				width: 100%;
			}

			.txt {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;

				width: 100%;
				height: 90%;
				color: #ffa868;
				font-size: 28rpx;
				font-weight: 700;
			}
		}

		.page-num {
			color: #ffa868;
			font-size: 28rpx;
			font-weight: 700;
		}
	}

	.title-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;

		.title-item {
			position: relative;
			width: 200rpx;
			display: flex;

			&:last-child {
				margin-left: 50rpx;
			}

			.bg {
				width: 100%;
				height: 84rpx;
			}

			.title {
				position: absolute;
				width: 60%;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				height: 84rpx;
			}
		}
	}

	::v-deep {
		.u-cell {
			height: 180rpx;
			color: #a4a4a4 !important;
			display: flex;
			justify-content: center;

			&:after {
				content: '';
				position: absolute;
				left: 36rpx;
				top: auto;
				bottom: 0;
				height: 2px;
				width: 92vw;
				background-color: #eeeeee;
			}

			.u-icon__icon {
				font-size: 40rpx !important;
			}
		}
	}
}

::v-deep {
	.u-line {
		border-color: #fff !important;
	}
}

.im-wrapper {
	position: fixed;
	top: 70%;
	right: 10rpx;
	z-index: 999;
	background-color: #13227a;
	border-radius: 10rpx;
	padding-bottom: 2px;
	box-sizing: border-box;

	.im-btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		background-color: #fff;
		padding: 6px 10px;

		&:after {
			border: none;
		}

		&:active {
			color: unset;
		}

		.im-btn-text {
			font-size: 13px;
			line-height: 16px;
			margin-top: 5px;
		}
	}
}
</style>
